<template>
	<view class="page-wrapper">
		<CommonTitle title="数据" @handleInfoSuccess="handleCommonInfoSuccess"></CommonTitle>
		<!-- 横向滚动列表: 50px -->
		<up-scroll-list class="scroll-wrap" :indicator="false">
			<view class="scroll-list-wrap">
				<view
					class="scroll-list-item"
					v-for="(item, index) of categories"
					:key="index"
					:class="{ active: item.name === categoryActive }"
					@click="changeCategoryActive(item.name)"
				>
					<text class="name">{{ item.name }}</text>
				</view>
			</view>
		</up-scroll-list>
		<!-- 列表 -->
		<view
			class="list-wrap"
			:style="{
				height: `calc(100% - ${titleHeight}px - 50px)`
			}"
		>
			<!-- 今日数据统计 -->
			<view class="today-wrap" v-show="allCateStatus['today']">
				<DataTitle title="今日数据统计"></DataTitle>
				<!-- 内容 -->
				<view class="today-list">
					<view v-for="(item, index) of todaySummaryData" :key="index" class="today-list-item">
						<view class="line-one">
							<text class="num">{{ item.num }}</text>
							<text class="unit">{{ item.unit }}</text>
						</view>
						<view class="line-two">{{ item.name }}</view>
					</view>
				</view>
			</view>

			<!-- 过境客源 -->
			<view class="source-wrap" v-if="allCateStatus['source']">
				<DataTitle title="过境客源"></DataTitle>
				<!-- 内容 -->
				<view class="source-content">
					<!-- 头像文字列表 -->
					<view class="avatar-list">
						<view class="avatar-item">
							<text class="num">{{ touristData.total }}</text>
							<image class="user-logo" src="/static/data/user-logo.png" mode=""></image>
							<text class="text-box">实时过境客流量</text>
						</view>
						<view class="avatar-item">
							<text class="num">{{ touristData.local }}</text>
							<image class="user-logo" src="/static/data/user-logo.png" mode=""></image>
							<text class="text-box">本地人数</text>
						</view>
						<view class="avatar-item">
							<text class="num">{{ touristData.tourist }}</text>
							<image class="user-logo" src="/static/data/user-logo.png" mode=""></image>
							<text class="text-box">推断游客数（实时）</text>
						</view>
					</view>
					<!-- 图标-1 -->
					<view class="chart-one-wrap">
						<DataControls
							:active-btn-item-obj="sourceBtnList.at(-1)"
							:btnList="sourceBtnList"
							:show-title="false"
							@handleClick="handleSourceDateBtnClick"
						>
							<CustomUCharts
								type="line"
								:opts="sourceChartOneInfo.opts.value"
								:chartData="sourceChartOneInfo.chartData.value"
								style="width: 100%; height: 100%"
							></CustomUCharts>
						</DataControls>
					</view>
					<!-- 来源地 -->
					<view class="position-wrap">
						<DataControls
							title="来源地"
							:btnList="positionBtnList"
							:active-btn-item-obj="positionBtnList.at(-1)"
							@handleClick="touristBtnChange"
						>
							<view
								v-for="(item, index) of touristTop5Data"
								:key="index"
								:style="{ marginBottom: index < touristTop5Data.length - 1 ? '20rpx' : '0' }"
							>
								<DataProgress :title="`TOP${item.top}`" :name="item.name" :ratio="item.ratio" />
							</view>
						</DataControls>
					</view>
					<!-- 客源比例 -->
					<view class="source-ratio-wrap">
						<DataControls title="客源比例" :show-btns="false">
							<view class="one-box">
								<view class="title-one-box">
									<text class="name">本市</text>
									<view class="line"></view>
									<text class="text">{{ userSourceRatio.city }}</text>
								</view>
								<view class="title-two-box">
									<text class="name">外市</text>
									<view class="line"></view>
									<text class="text">{{ userSourceRatio.otherCity }}</text>
								</view>
								<!-- 饼状图 -->
								<view class="pie-wrap">
									<CustomUCharts
										type="ring"
										:opts="userRatioChartOneInfo.opts.value"
										:chart-data="userRatioChartOneInfo.chartData.value"
									></CustomUCharts>
								</view>
							</view>
							<view class="two-box">
								<view class="title-one-box">
									<text class="name">本省</text>
									<view class="line"></view>
									<text class="text">{{ userSourceRatio.province }}</text>
								</view>
								<view class="title-two-box">
									<text class="name">外省</text>
									<view class="line"></view>
									<text class="text">{{ userSourceRatio.otherProvince }}</text>
								</view>
								<!-- 饼状图 -->
								<view class="pie-wrap">
									<CustomUCharts
										type="ring"
										:opts="userRatioChartTwoInfo.opts.value"
										:chart-data="userRatioChartTwoInfo.chartData.value"
									></CustomUCharts>
								</view>
							</view>
						</DataControls>
					</view>
				</view>
			</view>

			<!-- 热门区域客流数据 -->
			<view class="hot-wrap" v-if="allCateStatus['hotArea']">
				<DataTitle title="热门区域客流数据"></DataTitle>
				<!-- 内容 -->
				<view class="hot-content">
					<!-- 数据列表 -->
					<view class="hot-item" v-for="(item, index) of hotAreaTouristData" :key="index">
						<view class="hot-left">
							<image class="logo" src="/assets/images/data/hot-area-left-logo.png" mode=""></image>
							<text class="text">{{ item.name }}</text>
						</view>
						<view class="hot-right">
							<image class="logo" src="/static/data/user-logo.png" mode=""></image>
							<text class="num">{{ item.in }}</text>
						</view>
					</view>
				</view>
				<!-- 历史数据 -->
				<view class="history-wrap">
					<DataControls :show-btns="false" title="历史数据">
						<CustomUCharts
							type="line"
							:opts="hotareaHistoryChartInfo.opts.value"
							:chart-data="hotareaHistoryChartInfo.chartData.value"
							style="width: 100%; height: 100%"
						></CustomUCharts>
					</DataControls>
				</view>
			</view>

			<!-- 核心景区游客画像 -->
			<view class="trend-wrap" v-if="allCateStatus['trend']">
				<DataTitle title="核心景区游客画像"></DataTitle>
				<view class="trend-content">
					<!-- 日期 -->
					<DataControls
						:showTitle="false"
						:btn-list="sourceBtnList"
						:active-btn-item-obj="sourceBtnList.at(-1)"
						@handleClick="handleUserPortraitDateChange"
					></DataControls>
					<!-- 实时检票趋势 -->
					<view class="ticket-now-wrap">
						<view class="name">实时检票趋势</view>
						<CustomUCharts
							type="line"
							:opts="ticketNowInfo.opts.value"
							:chartData="ticketNowInfo.chartData.value"
							style="width: 100%; height: 100%"
						></CustomUCharts>
					</view>
					<!-- 历史检票趋势 -->
					<view class="ticket-history-wrap">
						<view class="name">实时检票趋势</view>
						<CustomUCharts
							type="line"
							:opts="ticketNowInfo.opts.value"
							:chartData="ticketNowInfo.chartData.value"
							style="width: 100%; height: 100%"
						></CustomUCharts>
					</view>
					<!-- 性别 + 年龄段分布 -->
					<view class="sex-age-wrap">
						<!-- 性别 -->
						<view class="sex-wrap">
							<view class="title">性别分析</view>
							<view class="sex-content">
								<view class="male-box">
									<view class="text">男性人数</view>
									<view class="line"></view>
									<view class="num">{{ userPortraitData.malePass }}</view>
								</view>
								<view class="female-box">
									<view class="text">女性人数</view>
									<view class="line"></view>
									<view class="num">{{ userPortraitData.femalePass }}</view>
								</view>
								<view class="qiun-wrap">
									<CustomUCharts
										type="pie"
										:opts="sexChartInfo.opts.value"
										:chartData="sexChartInfo.chartData.value"
										style="width: 100%; height: 100%"
									></CustomUCharts>
								</view>
							</view>
						</view>
						<!-- 年龄 -->
						<view class="age-wrap">
							<view class="title">年龄段分布</view>
							<view class="age-list">
								<view
									class="age-item"
									v-for="(item, index) of userAgeProgressData"
									:key="item"
									:style="{ marginBottom: item === userAgeProgressData.length - 1 ? '0' : '30rpx' }"
								>
									<text class="tip">{{ item.name }}</text>
									<view class="progress-box">
										<view class="progress primary" :style="{ width: `${item.precent}%` }">
											<text class="text">{{ item.num }}人</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 票务销售 -->
			<view class="ticket-wrap" v-if="allCateStatus['ticket']">
				<DataTitle title="票务销售"></DataTitle>
				<view class="ticket-content">
					<!-- 销售信息 -->
					<view class="sales-wrap">
						<view class="title">销售信息</view>
						<!-- 描述 -->
						<up-table bgColor="#104993" borderColor="#00BBFF" color="#fff" fontSize="20rpx">
							<up-tr v-for="item in 5" :key="item">
								<up-td width="50%" class="cell-one">
									<view class="line-one">
										<view class="name">九华股份售票数</view>
										<view class="desc">
											<text class="num">684</text>
											<text class="unit">人</text>
										</view>
									</view>
									<view class="line-two">
										<view class="name">销售额</view>
										<view class="desc">
											<text class="num">25.6</text>
											<text class="unit">万元</text>
										</view>
									</view>
								</up-td>
								<up-td width="50%" class="cell-two">
									<view class="line-one">
										<view class="name">检票总数</view>
										<view class="desc">
											<text class="num">25689</text>
											<text class="unit">人</text>
										</view>
									</view>
								</up-td>
							</up-tr>
						</up-table>
					</view>
					<!-- 销售额数据趋势 -->
					<view class="sales-price-wrap">
						<view class="title">销售额数据趋势</view>
						<view class="qiun-wrap">
							<DataControls :show-title="false" :btnList="salesPriceBtnList">
								<CustomUCharts
									type="line"
									:opts="salesPriceChartInfo.opts.value"
									:chartData="salesPriceChartInfo.chartData.value"
								></CustomUCharts>
							</DataControls>
						</view>
					</view>
				</view>
			</view>

			<!-- 索道运营 -->
			<view class="ropeway-wrap" v-if="allCateStatus['ropeway']">
				<DataTitle title="索道运营"></DataTitle>
				<view class="ropeway-content">
					<!-- 日期筛选 -->
					<DataControls
						:show-title="false"
						:btn-list="sourceBtnList"
						@handleClick="handleRopewayDateChange"
						:active-btn-item-obj="sourceBtnList.at(-1)"
					></DataControls>
					<DataControls
						:show-title="false"
						:btn-list="passengerUpDonwBtnList"
						:active-btn-item-obj="passengerUpDonwBtnList.at(0)"
						@handleClick="handleRopewayTypeChange"
					></DataControls>
					<!-- 描述列表 -->
					<view class="desc-list">
						<view class="list-item" v-for="(item, index) of ropewayData" :key="index">
							<view class="title-box">
								<image class="title-logo" src="/static/logo.png" mode=""></image>
								<text class="title-text">{{ item.name }}</text>
								<!-- 狮子峰建设中 -->
								<text v-show="item.name === '狮子峰'" class="danger-tag">(建设中)</text>
							</view>
							<view class="item-content">
								<view class="item">
									<view class="num">{{ item.check }}</view>
									<view class="text">检票数</view>
								</view>
								<view class="item">
									<view class="num">{{ item.sale }}</view>
									<view class="text">售票数</view>
								</view>
								<view class="item">
									<view class="num">{{ item.wait }}</view>
									<view class="text">等待上车人数</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 折线图 -->
					<view class="chart-wrap">
						<CustomUCharts
							type="line"
							:opts="ropewayChartInfo.opts.value"
							:chartData="ropewayChartInfo.chartData.value"
						></CustomUCharts>
						<!-- <qiun-data-charts
							type="line"
							:opts="ropewayChartInfo.opts.value"
							:chartData="ropewayChartInfo.chartData.value"
						/> -->
					</view>
				</view>
			</view>

			<!-- 客运运力分析 -->
			<view class="passenger-wrap" v-if="allCateStatus['passenger']">
				<DataTitle title="客运运力分析"></DataTitle>
				<!-- 日期 -->
				<DataControls
					:show-title="false"
					:btn-list="salesPriceBtnList"
					:active-btn-item-obj="salesPriceBtnList.at(-1)"
					@handleClick="handlePassengerDateChange"
				></DataControls>
				<view class="passenger-content">
					<!-- 运营车辆数 + 座位总数 -->
					<view class="bus-seat-box">
						<view class="bus-box">
							<view class="data">
								<text class="num" :title="passengerAnalysisData.busTotal + '辆'">
									{{ passengerAnalysisData.busTotal }}
								</text>
								<text class="unit">辆</text>
							</view>
							<view class="title">运力次数</view>
						</view>
						<view class="keyun-box">
							<view class="data">
								<text class="num" :title="passengerAnalysisData.keyun + '辆'">
									{{ passengerAnalysisData.keyun }}
								</text>
								<text class="unit">辆</text>
							</view>
							<view class="title">客运车数</view>
						</view>
						<view class="seat-box">
							<view class="data">
								<text class="num" :title="passengerAnalysisData.seatTotal">
									{{ passengerAnalysisData.seatTotal }}
								</text>
							</view>
							<view class="title">座位总数</view>
						</view>
					</view>
					<!-- 右侧内容 -->
					<view class="card-one">
						<DataControls
							title="客运高峰分析"
							:btn-list="passengerUpDonwBtnList"
							@handleClick="handlePassengerUpDownbtnClick"
						>
							<CustomUCharts
								type="line"
								:opts="passengerUpDownChartInfo.opts.value"
								:chartData="passengerUpDownChartInfo.chartData.value"
							></CustomUCharts>
						</DataControls>
					</view>
					<view class="card-two">
						<DataControls
							title="历史进出客运分析"
							:show-btns="false"
						>
							<CustomUCharts
								type="line"
								:opts="historyBusChartInfo.opts.value"
								:chartData="historyBusChartInfo.chartData.value"
							></CustomUCharts>
						</DataControls>
					</view>
					<view class="card-three">
						<DataControls
							:show-title="false"
							:show-btns="false"
						>
							<view class="card-content">
								<view class="sit-box">
									<view class="sit-start">发车点</view>
									<view class="middle-box"></view>
									<view class="sit-end">终点</view>
								</view>
								<view class="scroll-wrapper">
									<up-scroll-list class="scroll-list">
										<view
											class="scroll-item"
											v-for="(item, index) of passengerAnalysisData.stionList"
											:key="index"
										>
											<view class="sit-start">{{ item.startName }}</view>
											<view class="image-wrap">
												<image
													class="logo"
													src="@/assets/images/data/sition-logo.png"
													mode=""
												></image>
												<text class="num">{{ item.total }}</text>
											</view>
											<view class="sit-end">{{ item.endName }}</view>
										</view>
									</up-scroll-list>
								</view>
							</view>
						</DataControls>
					</view>
				</view>
			</view>

			<!-- 交通管理 -->
			<view class="traffic-wrap" v-if="allCateStatus['traffic']">
				<DataTitle title="交通管理"></DataTitle>
				<view class="traffic-content">
					<!-- 车辆汇总信息 -->
					<view class="car-total-info">
						<DataControls
							title="车辆汇总信息"
							:show-btns="true"
							:btn-list="salesPriceBtnList"
							:active-btn-item-obj="salesPriceBtnList.at(-1)"
							@handleClick="handleTrafficDateChange"
						>
							<view class="category">
								<view
									:class="{ active: trafficCatActive === 0 }"
									@click="changeTrafficCatActive(0)"
									class="category-item"
								>
									森林检查站
								</view>
								<view
									:class="{ active: trafficCatActive === 1 }"
									@click="changeTrafficCatActive(1)"
									class="category-item"
								>
									迎仙桥站
								</view>
							</view>
							<view class="desc-wrap">
								<view class="desc-item">
									<image
										class="img-wrap"
										src="@/assets/images/data/traffic-logo.png"
										mode=""
									></image>
									<view class="title-box">
										<view class="title">驶入车辆</view>
										<view class="num">{{ carSummaryItemInfo.in }}</view>
										<view class="title">本地车辆</view>
										<view class="num">{{ carSummaryItemInfo.inBd }}</view>
									</view>
								</view>
								<view class="desc-item">
									<image
										class="img-wrap"
										src="@/assets/images/data/traffic-logo.png"
										mode=""
									></image>
									<view class="title-box">
										<view class="title">驶出车辆</view>
										<view class="num">{{ carSummaryItemInfo.out }}</view>
										<view class="title">本地车辆</view>
										<view class="num">{{ carSummaryItemInfo.outBd }}</view>
									</view>
								</view>
							</view>
						</DataControls>
					</view>
					<!-- 车辆来源分析 -->
					<view class="car-source-info">
						<DataControls title="车辆来源分析" :show-btns="false">
							<CustomUCharts
								type="ring"
								:opts="carSourceChartInfo.opts.value"
								:chartData="carSourceChartInfo.chartData.value"
							></CustomUCharts>
							<!-- 	<qiun-data-charts
								type="ring"
								:opts="carSourceChartInfo.opts.value"
								:chartData="carSourceChartInfo.chartData.value"
							/> -->
						</DataControls>
					</view>
					<!-- 车辆停留时长 -->
					<view class="car-stop-time">
						<DataControls title="车辆停留时长" :show-btns="false">
							<view
								class="age-item"
								v-for="(item, index) of trafficCarStayData"
								:key="item"
								:style="{ marginBottom: index >= trafficCarStayData.length - 1 ? '0' : '25rpx' }"
							>
								<text class="tip">{{ item.name }}</text>
								<view class="progress-box">
									<view class="progress primary" :style="{ width: `${item.ratio}%` }">
										<text class="text">{{ item.num }}辆</text>
									</view>
								</view>
							</view>
						</DataControls>
					</view>
					<!-- 实时车流趋势驶入 -->
					<view class="real-time-car-in">
						<DataControls title="实时车流趋势驶入" :show-btns="false">
							<CustomUCharts
								type="line"
								:opts="realtimeCarInChartInfo.opts.value"
								:chart-data="realtimeCarInChartInfo.chartData.value"
							></CustomUCharts>
						</DataControls>
					</view>
					<!-- 实时车流趋势驶出 -->
					<view class="real-time-car-out">
						<DataControls title="实时车流趋势驶出" :show-btns="false">
							<CustomUCharts
								type="line"
								:opts="realtimeCarOutChartInfo.opts.value"
								:chart-data="realtimeCarOutChartInfo.chartData.value"
							></CustomUCharts>
						</DataControls>
					</view>
					<!-- 本地车辆趋势 -->
					<view class="local-car-trend">
						<DataControls
							title="本地车辆趋势"
							:show-btns="true"
							:btn-list="localCartrendBtnList"
							:active-btn-item-obj="localCartrendBtnList.at(0)"
							@handleClick="handleLocalCarBtnChange"
						>
							<CustomUCharts
								type="line"
								:opts="localCarChartInfo.opts.value"
								:chart-data="localCarChartInfo.chartData.value"
							></CustomUCharts>
						</DataControls>
					</view>
				</view>
			</view>

			<!-- 停车厂管理 -->
			<view class="stop-car-wrap" v-if="allCateStatus['stopCar']">
				<DataTitle title="停车场管理"></DataTitle>
				<view class="stop-car-content">
					<!-- 停车场列表 -->
					<view class="stop-car-list">
						<view class="stop-car-item" v-for="(item, index) of trafficListData" :key="index">
							<view class="title-box">
								<text>{{ item.name }}</text>
								<view class="tag-box" :class="[item.tagType]">
									{{ item.tagType === 'danger' ? '维护中' : '开放中' }}
								</view>
							</view>
							<view class="line">
								<text>已停车辆</text>
								<text>{{ item.num1 }}</text>
							</view>
							<view class="line">
								<text>剩余车位</text>
								<text>{{ item.num2 }}</text>
							</view>
						</view>
					</view>
					<!-- 车辆归属地TOP5 -->
					<view class="car-top5">
						<DataControls
							title="车辆归属地TOP5"
							@handleClick="handleCarTop5BtnClick"
							:active-btn-item-obj="positionBtnList.at(-1)"
						>
							<view
								v-for="(item, index) of trafficTop5Data"
								:key="index"
								:style="{ marginBottom: index < trafficTop5Data.length - 1 ? '20rpx' : '0' }"
							>
								<DataProgress :title="`TOP${item.top}`" :name="item.name" :ratio="item.ratio" />
							</view>
						</DataControls>
					</view>
					<!-- 日期选择 -->
					<view class="" style="margin-top: 10rpx">
						<DataControls
							:show-title="false"
							:btn-list="sourceBtnList"
							:active-btn-item-obj="sourceBtnList.at(-1)"
							@handleClick="handleStopCarDateChange"
						></DataControls>
					</view>
					<!-- 车流量信息 -->
					<view class="car-num-wrap">
						<DataControls title="车流量信息" :show-btns="false">
							<CustomUCharts
								type="line"
								:reshow="allCateStatus['stopCar']"
								:opts="carflowChartInfo.opts.value"
								:chart-data="carflowChartInfo.chartData.value"
							></CustomUCharts>
						</DataControls>
					</view>
					<!-- 停车收费分析 -->
					<view class="stop-money-wrap">
						<DataControls title="停车收费分析" :show-btns="false">
							<view class="total-price-wrap">
								<image src="@/assets/images/data/stop-money-logo.png" mode=""></image>
								<text class="text">总金额</text>
								<text class="num">{{ trafficStopMoneyData.total }}元</text>
							</view>
							<!-- 图表 -->
							<view class="chart-wrap">
								<CustomUCharts
									type="line"
									:reshow="allCateStatus['stopCar']"
									:opts="carStopMoneyChartInfo.opts.value"
									:chart-data="carStopMoneyChartInfo.chartData.value"
								></CustomUCharts>
							</view>
						</DataControls>
					</view>
					<!-- 收费方式分析 -->
					<view class="money-way-wrap">
						<DataControls title="收费方式分析" :show-btns="false">
							<CustomUCharts
								type="line"
								:opts="carMoneyWayChartInfo.opts.value"
								:chart-data="carMoneyWayChartInfo.chartData.value"
							></CustomUCharts>
						</DataControls>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import {
	hotAreaList,
	categories,
	categoryUnique,
	sourceBtnList,
	positionBtnList,
	salesPriceBtnList,
	passengerUpDonwBtnList,
	localCartrendBtnList,
	userAgeProgressConfig
} from './helper/config.js';
import {
	getSexChartInfo,
	getSourceChartOneInfo,
	getTicketHistoryInfo,
	getTicketNowInfo,
	getSalePriceChartInfo,
	getRopewayChartInfo,
	getPassengerUpDownChartInfo,
	getCarSourceChartInfo,
	getCarStopMoneyAnalysisChartInfo,
	getCarMoneyWayChartInfo,
	getUserRatioChartOneInfo,
	getUserRatioChartTwoInfo,
	getRealtimeCarTrendChartInfo,
	getLocalCarTrendChartInfo,
	getCarFlowChartInfo,
	getHotareaHistoryChartInfo
} from './helper/echarts.js';
import { getTodayDataSummary } from './helper/api.js';
import {
	carFlowInfoAPI,
	getUserPortraitAPI,
	hotAreaTouristAPI,
	localCarTrendAPI,
	passengerAnalysisAPI,
	ropeywayAPI,
	todayDataSummaryAPI,
	todayFactualAnalysisAPI,
	touristDataAPI,
	touristTop5DataAPI,
	trafficCarRealtimeTrendAPI,
	trafficCarSourceInfoAPI,
	trafficCarStayInfoAPI,
	trafficCarSummaryInfoAPI,
	trafficListAPI,
	trafficListTop5API,
	trafficStopMethodAPI,
	trafficStopMoneyAPI
} from '@/api/dataScreenBig';

/**
 * 头部分类框
 */
const categoryActive = ref(categoryUnique['source']);
const changeCategoryActive = (key) => {
	categoryActive.value = key;
};

/**
 *  今日数据统计
 */
const todaySummaryData = ref([]);
const todaySummaryDataConfig = [
	{
		name: '今日过境',
		num: 0,
		numKey: 'smTotal',
		unit: '人'
	},
	{
		name: '售票',
		num: 0,
		numKey: 'ticketSales',
		unit: '张'
	},
	{
		name: '过闸机',
		num: 0,
		numKey: 'ticketCheck',
		unit: '人'
	},
	{
		name: '来山车辆',
		num: 0,
		numKey: 'carAccTotal',
		unit: '辆'
	},
	{
		name: '客运进',
		num: 0,
		numKey: 'passInTotal',
		unit: '人'
	},
	{
		name: '客运出',
		num: 0,
		numKey: 'passOutTotal',
		unit: '人'
	},
	{
		name: '累计驻留',
		num: 0,
		numKey: 'stayTotal',
		unit: '人'
	}
];
const getTodayDataSummaryFunc = async () => {
	const res = await todayDataSummaryAPI();
	if (res.code !== 200) return;
	todaySummaryData.value = todaySummaryDataConfig.map((item) =>
		Object.assign(item, {
			num: res.data[item.numKey]
		})
	);
	console.log('获取的 todaySummary 数据', todaySummaryData.value);
};
onMounted(() => {
	getTodayDataSummaryFunc();
});

/**
 * 过境客源
 */
// 来源地Top5
const touristData = ref({});
const touristTop5OriginData = ref({});
const touristTop5Data = ref([]);
const sourceChartOneInfo = getSourceChartOneInfo();
const userSourceRatio = reactive({
	city: 0,
	otherCity: 0,
	province: 0,
	otherProvince: 0
});
// 客源比例饼状图 - 1
const userRatioChartOneInfo = getUserRatioChartOneInfo();
const userRatioChartTwoInfo = getUserRatioChartTwoInfo();
const getTouristDataAsync = async (params) => {
	const res = await touristDataAPI(params);
	if (res.code !== 200) return;
	touristData.value = res.data;
	// 客源比例
	userSourceRatio.city = res.data.city;
	userSourceRatio.otherCity = res.data.otherCity;
	userSourceRatio.province = res.data.province;
	userSourceRatio.otherProvince = res.data.otherProvince;
	// 设置图表
	sourceChartOneInfo.setChartData(res.data);
	userRatioChartOneInfo.setChartData(userSourceRatio);
	userRatioChartTwoInfo.setChartData(userSourceRatio);
};
const getTouristTop5Data = async (params) => {
	const res = await touristTop5DataAPI(params);
	if (res.code !== 200) return;
	touristTop5OriginData.value = res.data;
	touristBtnChange(positionBtnList[2]);
};
const touristBtnChange = (itemObj) => {
	touristTop5Data.value = touristTop5OriginData.value[itemObj.value];
};
const handleSourceDateBtnClick = (itemObj) => {
	getTouristDataAsync({
		type: itemObj.value
	});
	getTouristTop5Data({
		type: itemObj.value
	});
};

onMounted(() => {
	getTouristTop5Data({
		type: sourceBtnList.at(-1).value
	});
	getTouristDataAsync({
		type: sourceBtnList.at(-1).value
	});
});

/**
 * 热门区域游客数据
 */
const hotAreaTouristData = ref({});
const getHotAreaTouristDataAsync = async () => {
	const res = await todayFactualAnalysisAPI();
	if (res.code !== 200) return;
	hotAreaTouristData.value = res.data;
};
// 历史数据
const hotareaHistoryChartInfo = getHotareaHistoryChartInfo();
const getHotareaHistoryAsync = async () => {
	const res = await hotAreaTouristAPI();
	if (res.code !== 200) return;
	hotareaHistoryChartInfo.setChartData(res.data);
};
onMounted(() => {
	getHotAreaTouristDataAsync();
	getHotareaHistoryAsync();
});

/**
 * 入园趋势
 */
const userPortraitData = ref({});
const userAgeProgressData = ref(userAgeProgressConfig);
const sexChartInfo = getSexChartInfo();
const getUserPortraitDataAsync = async (params) => {
	const res = await getUserPortraitAPI(params);
	if (res.code !== 200) return;
	userPortraitData.value = res.data;
	userAgeProgressData.value = userAgeProgressData.value.map((item) =>
		Object.assign({}, item, {
			num: res.data[item.numKey],
			precent: res.data[item.precentKey]
		})
	);
	sexChartInfo.setChartData(res.data);
};
const handleUserPortraitDateChange = (itemObj) => {
	getUserPortraitDataAsync({ type: itemObj.value });
};
onMounted(() => {
	getUserPortraitDataAsync({ type: sourceBtnList.at(-1).value });
});
/**
 * 索道运营
 */
const ropewayOriginData = ref({});
const ropewayData = ref({});
const ropewayChartInfo = getRopewayChartInfo();
const getRopewayDataAsync = async (params) => {
	const res = await ropeywayAPI(params);
	if (res.code !== 200) return;
	ropewayOriginData.value = res.data;
	// 切换数据
	handleRopewayTypeChange(passengerUpDonwBtnList.at(0));
	// 设置图表
	ropewayChartInfo.setChartData(res.data);
};
const handleRopewayDateChange = (itemObj) => {
	getRopewayDataAsync({ type: itemObj.value });
};
// 上山下山
const handleRopewayTypeChange = (itemObj) => {
	if (itemObj.value === 'up') {
		// 上山
		ropewayData.value = ropewayOriginData.value.info;
	}
	if (itemObj.value === 'down') {
		// 下山
		ropewayData.value = ropewayOriginData.value.infoOut;
	}
};
onMounted(() => {
	getRopewayDataAsync({ type: sourceBtnList.at(-1).value });
});

/**
 * 客运运力分析
 */
const passengerAnalysisData = ref({});
const upDownActiveBtnData = ref(passengerUpDonwBtnList[0]);
const passengerUpDownChartInfo = getPassengerUpDownChartInfo();
const historyBusChartInfo = getPassengerUpDownChartInfo()
const getPassengerAsync = async (params) => {
	const res = await passengerAnalysisAPI(params);
	if (res.code !== 200) return;
	passengerAnalysisData.value = res.data;
	// 历史进出客运分析
	historyBusChartInfo.setChartData(res.data.all)
	handlePassengerUpDownbtnClick(upDownActiveBtnData.value);
};
const handlePassengerDateChange = (itemObj) => {
	getPassengerAsync({ type: itemObj.value });
};
const handlePassengerUpDownbtnClick = (itemObj) => {
	upDownActiveBtnData.value = itemObj;
	if (upDownActiveBtnData.value.value === 'down') {
		// 下山
		passengerUpDownChartInfo.setChartData(passengerAnalysisData.value.down);
	}

	if (upDownActiveBtnData.value.value === 'up') {
		// 上山
		passengerUpDownChartInfo.setChartData(passengerAnalysisData.value.up);
	}
};
onMounted(() => {
	getPassengerAsync({ type: salesPriceBtnList.at(-1).value });
});

/**
 * 交通管理
 */
const trafficCarSummaryInfoData = ref({});
const carSummaryItemInfo = ref({ in: 0, out: 0, inBd: 0, outBd: 0 });
const trafficCarStayData = ref([]);
const trafficCatActive = ref(0);
const carSourceChartInfo = getCarSourceChartInfo();
const changeTrafficCatActive = (curActive) => {
	trafficCatActive.value = curActive;
	setRealtimeCarChart();
	if (curActive === 0) {
		// 森林检查站
		carSummaryItemInfo.value.in = trafficCarSummaryInfoData.value.slInTotal;
		carSummaryItemInfo.value.out = trafficCarSummaryInfoData.value.slOutTotal;
		carSummaryItemInfo.value.inBd = trafficCarSummaryInfoData.value.slBsTotal;
		carSummaryItemInfo.value.outBd = trafficCarSummaryInfoData.value.slWsTotal;
	}
	if (curActive === 1) {
		// 迎仙桥
		carSummaryItemInfo.value.in = trafficCarSummaryInfoData.value.yxInTotal;
		carSummaryItemInfo.value.out = trafficCarSummaryInfoData.value.yxOutTotal;
		carSummaryItemInfo.value.inBd = trafficCarSummaryInfoData.value.yxBsTotal;
		carSummaryItemInfo.value.inBd = trafficCarSummaryInfoData.value.yxWsTotal;
	}
};
const handleTrafficDateChange = (itemObj) => {
	getTrafficCarSummaryInfoAsync({ type: itemObj.value });
	getTrafficCarSourceInfoAsync({ type: itemObj.value });
};
const getTrafficCarSummaryInfoAsync = async (params) => {
	const res = await trafficCarSummaryInfoAPI(params);
	if (res.code !== 200) return;
	trafficCarSummaryInfoData.value = res.data;
	changeTrafficCatActive(trafficCatActive.value);
};
const getTrafficCarStayAsync = async () => {
	const res = await trafficCarStayInfoAPI();
	if (res.code !== 200) return;
	trafficCarStayData.value = res.data;
};
const getTrafficCarSourceInfoAsync = async (params) => {
	const res = await trafficCarSourceInfoAPI(params);
	if (res.code !== 200) return;
	// 设置图表
	carSourceChartInfo.setChartData(res.data);
};
// 设置实时车辆趋势
const realtimeCarOriginData = ref({});
const realtimeCarInChartInfo = getRealtimeCarTrendChartInfo();
const realtimeCarOutChartInfo = getRealtimeCarTrendChartInfo();
const setRealtimeCarChart = () => {
	if (trafficCatActive.value === 0) {
		// 森林
		realtimeCarInChartInfo.setChartData(realtimeCarOriginData.value.slUp, ['#00FF19']);
		realtimeCarOutChartInfo.setChartData(realtimeCarOriginData.value.slDown, ['#FF0033']);
	}

	if (trafficCatActive.value === 1) {
		// 迎仙
		realtimeCarInChartInfo.setChartData(realtimeCarOriginData.value.yxUp, ['#00FF19']);
		realtimeCarOutChartInfo.setChartData(realtimeCarOriginData.value.yxDown, ['#FF0033']);
	}
};
const getRealtimeCarTrendAsync = async () => {
	const res = await trafficCarRealtimeTrendAPI();
	if (res.code !== 200) return;
	// 设置图表
	realtimeCarOriginData.value = res.data;
	setRealtimeCarChart();
};
// 本地车辆趋势
const localCarTrendOriginData = ref({});
const curLocalBtnActive = ref(localCartrendBtnList.at(0));
const getLocalCarTrendAsync = async () => {
	const res = await localCarTrendAPI();
	if (res.code !== 200) return;
	localCarTrendOriginData.value = res.data;
	setLocalCarChartInfo();
};
const handleLocalCarBtnChange = (itemObj) => {
	curLocalBtnActive.value = itemObj;
	setLocalCarChartInfo();
};
const localCarChartInfo = getLocalCarTrendChartInfo();
const setLocalCarChartInfo = () => {
	if (trafficCatActive.value === 0) {
		// 森林
		if (curLocalBtnActive.value.value === 'in') {
			// 驶入
			localCarChartInfo.setChartData(
				localCarTrendOriginData.value.bdSlUp,
				localCarTrendOriginData.value.yySlUp
			);
		}
		if (curLocalBtnActive.value.value === 'out') {
			// 驶出
			localCarChartInfo.setChartData(
				localCarTrendOriginData.value.bdSlDown,
				localCarTrendOriginData.value.yySlDown
			);
		}
	} else {
		// 迎先桥
		if (curLocalBtnActive.value.value === 'in') {
			// 驶入
			localCarChartInfo.setChartData(
				localCarTrendOriginData.value.bdYxUp,
				localCarTrendOriginData.value.yyYxUp
			);
		}
		if (curLocalBtnActive.value.value === 'out') {
			// 驶出
			localCarChartInfo.setChartData(
				localCarTrendOriginData.value.bdYxDown,
				localCarTrendOriginData.value.yyYxDown
			);
		}
	}
};
onMounted(() => {
	getTrafficCarStayAsync();
	getTrafficCarSummaryInfoAsync({
		type: salesPriceBtnList.at(-1).value
	});
	getTrafficCarSourceInfoAsync({
		type: salesPriceBtnList.at(-1).value
	});
	getRealtimeCarTrendAsync();
	getLocalCarTrendAsync();
});

/**
 * 停车场管理
 */
const trafficListData = ref([]);
const trafficTop5Data = ref([]);
const trafficStopMoneyData = ref({});
const carStopMoneyChartInfo = getCarStopMoneyAnalysisChartInfo();
const carMoneyWayChartInfo = getCarMoneyWayChartInfo();
const getTrafficListAsync = async () => {
	const res = await trafficListAPI();
	if (res.code !== 200) return;

	const trafficListConfig = [
		{
			name: '中心停车场',
			num1: 0,
			num1Key: 'zxUesdCarports',
			num2: 0,
			num2Key: 'zxTotalCarports',
			tagType: 'success'
		},
		{
			name: '行祠路停车场',
			num1: 0,
			num1Key: 'xcUesdCarports',
			num2: 0,
			num2Key: 'xcTotalCarports',
			tagType: 'success'
		},
		{
			name: '圣安停车场',
			num1: 0,
			num1Key: 'saUesdCarports',
			num2: 0,
			num2Key: 'saTotalCarports',
			tagType: 'success'
		},
		{
			name: '文化园停车场',
			num1: 0,
			num1Key: 'dyUesdCarports',
			num2: 0,
			num2Key: 'dyTotalCarports',
			tagType: 'success'
		},
		{ name: '景区核心停车场', num1: 0, num1Key: '', num2: 0, num2Key: '', tagType: 'danger' }
	];
	trafficListData.value = trafficListConfig.map((item) => {
		item.num1 = res.data[item.num1Key] || 0;
		item.num2 = Number(res.data[item.num2Key] || 0) - Number(item.num1);
		return item;
	});
};
const getTrafficTop5Async = async (type) => {
	const res = await trafficListTop5API({ type });
	if (res.code !== 200) return;
	trafficTop5Data.value = res.data;
};
const getTrafficStopMoneyAsync = async (params) => {
	const res = await trafficStopMoneyAPI(params);
	if (res.code !== 200) return;
	trafficStopMoneyData.value = res.data;
	// 设置图表
	carStopMoneyChartInfo.setChartData(res.data);
};
const getTrafficStopMethodAsync = async (params) => {
	const res = await trafficStopMethodAPI(params);
	if (res.code !== 200) return;
	// 设置图表
	carMoneyWayChartInfo.setChartData(res.data);
};
const handleCarTop5BtnClick = (btnObj) => {
	getTrafficTop5Async(btnObj.value);
};
// 车流量信息
const carflowChartInfo = getCarFlowChartInfo();
const getCarFlowInfoAsync = async (params) => {
	const res = await carFlowInfoAPI(params);
	if (res.code !== 200) return;
	// 设置图表
	carflowChartInfo.setChartData(res.data);
};
// 数据加载
const handleStopCarDateChange = (itemObj) => {
	getTrafficStopMoneyAsync({ type: itemObj.value });
	getTrafficStopMethodAsync({ type: itemObj.value });
	getCarFlowInfoAsync({ type: itemObj.value });
};
onMounted(() => {
	getTrafficListAsync();
	getTrafficTop5Async(positionBtnList.at(-1).value);
	getTrafficStopMoneyAsync({ type: sourceBtnList.at(-1).value });
	getTrafficStopMethodAsync({ type: sourceBtnList.at(-1).value });
	getCarFlowInfoAsync({ type: sourceBtnList.at(-1).value });
});
// 内容块
const allCateStatus = computed(() => {
	const result = {};
	for (let [key, val] of Object.entries(categoryUnique)) {
		if (val === categoryActive.value) {
			result[key] = true;
		} else {
			result[key] = false;
		}
	}
	return result;
});

// 标题组件加载完毕
const titleHeight = ref(0);
const handleCommonInfoSuccess = (info) => {
	titleHeight.value = info.titleBoxHeight;
};

// 实时检票趋势
const ticketNowInfo = getTicketNowInfo();
ticketNowInfo.setChartData();
// 历史检票趋势
const ticketHistoryInfo = getTicketHistoryInfo();
ticketHistoryInfo.setChartData();

// 销售额数据趋势
const salesPriceChartInfo = getSalePriceChartInfo();
salesPriceChartInfo.setChartData();
</script>

<style lang="scss" scoped>
// 横向滚动条样式
::v-deep(.u-scroll-list) {
	&.scroll-wrap {
		padding-bottom: 10px;
		height: 50px;
	}
}

.scroll-list-wrap {
	padding-right: 20px;
	display: flex;
	height: 40px;
	// padding-left: 15px;

	.scroll-list-item {
		// &:nth-child(n + 2) {
		margin-left: 25px;
		// }
		height: 40px;
		line-height: 40px;
		white-space: nowrap;

		&.active {
			position: relative;
			.name {
				color: #ffcc00;
				font-weight: bold;
			}

			&::after {
				content: '';
				display: inline-block;
				position: absolute;
				left: 50%;
				top: 34px;
				transform: translateX(-50%);
				width: 51px;
				height: 4px;
				background-color: #ffcc00;
				border-radius: 3px;
			}
		}

		.name {
			color: #ffffff;
			font-size: 17px;
		}
	}
}

.list-wrap {
	padding: 20rpx 30rpx 50rpx 30rpx;
	width: 100%;
	overflow-y: auto;

	.today-wrap {
		padding: 0 30rpx;
		width: 100%;
		height: 548rpx;
		background: #104993;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		.today-list {
			width: 100%;
			height: calc(100% - 90rpx);
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20rpx 18rpx;

			.today-list-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				max-height: 122rpx;
				background: rgba(0, 255, 255, 0.11);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 2rpx solid #07deff;

				&:nth-child(7) {
					grid-column: span 3;
				}

				.line-one {
					.num {
						font-weight: bold;
						font-size: 42rpx;
						color: #03d6ff;
					}

					.unit {
						margin-left: 8rpx;
						font-weight: 400;
						font-size: 22rpx;
						color: #ffffff;
					}
				}

				.line-two {
					margin-top: 8rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #ffffff;
				}
			}
		}
	}

	.source-wrap {
		padding: 0 30rpx;
		width: 100%;
		background: #104993;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		.source-content {
			width: 100%;
			height: calc(100% - 90rpx);

			.avatar-list {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				width: 100%;
				height: 274rpx;

				.avatar-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.num {
						font-weight: bold;
						font-size: 46rpx;
						color: #fad103;
					}
					.user-logo {
						margin-top: 14rpx;
						width: 87rpx;
						height: 92rpx;
					}
					.text-box {
						margin-top: 4rpx;
						font-size: 20rpx;
						color: #ffffff;
					}
				}
			}

			.chart-one-wrap {
				width: 100%;
				height: 450rpx;
			}

			.position-wrap {
				margin-top: 20rpx;
				width: 100%;
				height: 350rpx;
			}

			.source-ratio-wrap {
				margin-top: 20rpx;
				width: 100%;
				.one-box,
				.two-box {
					display: flex;
					height: 250rpx;
					.title-one-box {
						width: 20%;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						.name {
							color: #fff;
							font-size: 28rpx;
						}
						.line {
							margin-top: 10rpx;
							width: 70rpx;
							height: 5rpx;
							background: #00ccff;
						}
						.text {
							margin-top: 10rpx;
							font-size: 28rpx;
							color: #00ccff;
						}
					}
					.title-two-box {
						width: 20%;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						.name {
							color: #fff;
							font-size: 28rpx;
						}
						.line {
							margin-top: 10rpx;
							width: 70rpx;
							height: 5rpx;
							background: #fd5e5e;
						}
						.text {
							margin-top: 10rpx;
							font-size: 28rpx;
							color: #fd5e5e;
						}
					}
					.pie-wrap {
						width: 60%;
						height: 100%;
					}
				}
				.two-box {
					.title-one-box {
						.line {
							background-color: #01ff89;
						}
						.text {
							color: #01ff89;
						}
					}
					.title-two-box {
						.line {
							background-color: #fcca00;
						}
						.text {
							color: #fcca00;
						}
					}
				}
			}
		}
	}

	.hot-wrap {
		padding: 0 30rpx;
		width: 100%;
		background: #104993;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		.hot-content {
			padding: 0 34rpx 0 32rpx;
			width: 100%;
			.hot-item {
				margin-bottom: 32rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 76rpx 0 36rpx;
				width: 100%;
				height: 166rpx;
				background: rgba(255, 235, 178, 0.09);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 2rpx solid #07ffdd;

				.hot-left {
					display: flex;
					.logo {
						width: 40rpx;
						height: 40rpx;
					}
					.text {
						font-size: 26rpx;
						color: #ffffff;
						margin-left: 10rpx;
					}
				}
				.hot-right {
					display: flex;
					.logo {
						width: 88rpx;
						height: 93rpx;
					}
					.num {
						width: 110rpx;
						margin-left: 18rpx;
						font-weight: bold;
						font-size: 64rpx;
						color: #ffcc00;
					}
				}
			}
		}
		.history-wrap {
			width: 100%;
			height: 400rpx;
			padding-bottom: 35rpx;
		}
	}

	.trend-wrap {
		padding: 0 30rpx 50rpx 30rpx;
		width: 100%;
		background: #104993;
		border-radius: 24rpx 24rpx 24rpx 24rpx;

		.trend-content {
			width: 100%;
			height: calc(100% - 90rpx);

			.ticket-now-wrap {
				width: 100%;
				height: 300rpx;

				.name {
					width: 100%;
					height: 30rpx;
					text-align: center;
					line-height: 30rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #ffffff;
				}
			}

			.ticket-history-wrap {
				margin-top: 40rpx;
				width: 100%;
				height: 300rpx;
				.name {
					width: 100%;
					height: 30rpx;
					text-align: center;
					line-height: 30rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #ffffff;
				}
			}

			.sex-age-wrap {
				margin-top: 40rpx;
				width: 100%;
				.sex-wrap {
					width: 100%;
					height: 100%;
					.title {
						font-size: 24rpx;
						height: 30rpx;
						line-height: 30rpx;
						color: #ffffff;
					}
					.sex-content {
						display: flex;
						width: 100%;
						height: 330rpx;
						.male-box,
						.female-box {
							width: 26%;
							height: 100%;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							.text {
								font-size: 24rpx;
								color: #fff;
							}
							.line {
								margin-top: 10rpx;
								width: 100rpx;
								height: 8rpx;
							}
							.num {
								margin-top: 10rpx;
								font-size: 24rpx;
								font-weight: bold;
							}
						}
						.male-box {
							.line {
								background: #0800ff;
							}
							.num {
								color: #0800ff;
							}
						}
						.female-box {
							.line {
								background: #fd5e5e;
							}
							.num {
								color: #fd5e5e;
							}
						}
						.qiun-wrap {
							width: 48%;
							height: calc(100% - 30rpx);
						}
					}
				}

				.age-wrap {
					width: 100%;
					height: 300rpx;
					.title {
						font-size: 24rpx;
						height: 30rpx;
						line-height: 30rpx;
						color: #ffffff;
					}
					.age-list {
						padding-top: 20rpx;
						width: 100%;
						height: calc(100% - 30rpx);
						overflow-y: auto;
						.age-item {
							display: flex;
							align-items: center;
							width: 100%;

							.tip {
								font-size: 20rpx;
								color: #fff;
							}
							.progress-box {
								margin-left: 10rpx;
								flex: 1;
								height: 30rpx;
								background: rgba(255, 255, 255, 0.16);

								.progress {
									position: relative;
									height: 100%;

									.text {
										position: absolute;
										top: 50%;
										right: -50rpx;
										transform: translateY(-50%);
										color: #fff;
										font-size: 20rpx;
									}

									&.primary {
										background: linear-gradient(270deg, #003cff 0%, #00d7f8 100%);
									}

									&.success {
										background: linear-gradient(90deg, #00ff2b 0%, #119811 100%);
									}

									&.warn {
										background: linear-gradient(90deg, #f7ff00 0%, #f88e00 100%);
									}

									&.danger {
										background: linear-gradient(90deg, #ffaaad 0%, #e31a1a 100%);
									}
								}
							}
						}
					}
				}
			}
		}
	}

	.ticket-wrap {
		padding: 0 30rpx 50rpx 30rpx;
		width: 100%;
		background: #104993;
		border-radius: 24rpx;

		.ticket-content {
			width: 100%;
			height: calc(100% - 90rpx);

			.sales-wrap {
				width: 100%;

				.title {
					font-size: 36rpx;
					color: #00d5ff;
					margin-bottom: 26rpx;
				}

				::v-deep(.u-table) {
					.cell-one {
						height: 120rpx;
					}
					.cell-two {
						height: 120rpx;
						.line-one {
							display: flex;
							justify-content: space-between;
							align-items: center;
							padding: 0 20rpx;

							.name {
								color: #fff;
								font-size: 20rpx;
							}
							.desc {
								margin-left: 34rpx;
								.num {
									font-size: 28rpx;
									color: #03d6ff;
								}
								.unit {
									margin-left: 14rpx;
									color: #fff;
									font-size: 20rpx;
								}
							}
						}
					}

					.line-one {
						padding: 0 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 20rpx;
						.name {
							color: #fff;
						}
						.desc {
							margin-left: 34rpx;
							.num {
								color: #03d6ff;
								font-size: 28rpx;
							}
							.unit {
								color: #fff;
								margin-left: 14rpx;
							}
						}
					}

					.line-two {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 20rpx;
						margin-top: 10rpx;
						.name {
							color: #fff;
							font-size: 20rpx;
						}
						.desc {
							margin-left: 34rpx;
							.num {
								font-size: 28rpx;
								color: #00ff19;
							}
							.unit {
								margin-left: 14rpx;
								color: #fff;
								font-size: 20rpx;
							}
						}
					}
				}
			}

			.sales-price-wrap {
				margin-top: 36rpx;
				width: 100%;
				.title {
					font-size: 36rpx;
					color: #00d5ff;
					margin-bottom: 20rpx;
				}
				.qiun-wrap {
					width: 100%;
					height: 400rpx;
				}
			}
		}
	}

	.ropeway-wrap {
		width: 100%;
		padding: 0 30rpx 50rpx 30rpx;
		background: #104993;
		border-radius: 24rpx;

		.ropeway-content {
			width: 100%;

			.desc-list {
				padding: 0 36rpx;
				.list-item {
					margin-bottom: 32rpx;
					width: 100%;
					height: 118rpx;
					display: flex;
					justify-content: space-between;
					background: url('/assets/images/data/ropeway-item-bg.png') center center no-repeat;
					background-size: 100% 100%;
					.title-box {
						margin-left: 15rpx;
						display: flex;
						align-items: center;
						width: 100px;
						height: 100%;
						.title-logo {
							width: 20rpx;
							height: 20rpx;
						}
						.title-text {
							margin-left: 8rpx;
							font-size: 24rpx;
							color: #fff;
						}
						.danger-tag {
							font-size: 24rpx;
							color: red;
						}
					}

					.item-content {
						flex: 1;
						display: flex;
						justify-content: space-around;
						align-items: center;
						background-size: 100% 100%;
						.item {
							flex: 1;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							.num {
								font-size: 28rpx;
								color: #ffe603;
							}
							.text {
								font-size: 16rpx;
								color: #ffffff;
							}
						}
					}
				}
			}

			.chart-wrap {
				margin-top: 40rpx;
				width: 100%;
				height: 350rpx;
			}
		}
	}

	.passenger-wrap {
		width: 100%;
		padding: 0 30rpx 50rpx 30rpx;
		background: #104993;
		border-radius: 24rpx;

		.passenger-content {
			.bus-seat-box {
				display: flex;
				padding-right: 20rpx;
				width: 100%;

				.bus-box,
				.keyun-box {
					margin-right: 30rpx;
					margin-bottom: 20rpx;
				}

				.bus-box,
				.keyun-box,
				.seat-box {
					width: 197rpx;
					height: 238rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					background: url('/static/data/passenger-bus-seat-item-bg.png') no-repeat center center;
					background-size: 100% 100%;

					.data {
						text-align: center;
						width: 100%;
						margin-bottom: 50rpx;
						.num {
							font-weight: bold;
							font-size: 42rpx;
							color: #00ffb2;
						}
						.unit {
							margin-left: 12rpx;
							font-size: 14rpx;
							color: #00ffb2;
						}
					}
					.title {
						font-size: 18rpx;
						color: #fff;
					}
				}
			}

			.card-one, .card-two {
				width: 100%;
				height: 350rpx;
			}
			.card-three {
				width: 100%;
				// height: 350rpx;

				::v-deep(.data-controls-wrap) {
					.card-content {
						display: flex;
						width: 100%;
						height: 100%;

						.sit-box {
							margin-right: 10rpx;
							padding-bottom: 40rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-between;
							.sit-start {
								font-size: 16rpx;
								color: #ffffff;
							}
							.middle-box {
								flex: 1;
							}
							.sit-end {
								font-size: 16rpx;
								color: #ffffff;
							}
						}

						.scroll-wrapper {
							flex: 1;
							height: 100%;
							overflow: hidden;

							.scroll-list {
								padding-bottom: 0;
								height: 100%;
							}

							.scroll-item {
								width: 100rpx;
								height: 100%;
								display: flex;
								flex-direction: column;
								justify-content: space-between;
								align-items: center;
								.sit-start {
									font-size: 16rpx;
									color: #ffffff;
								}
								.image-wrap {
									margin: 20rpx 0;
									display: flex;
									flex-direction: column;
									justify-content: center;
									align-items: center;
									.logo {
										width: 62rpx;
										height: 62rpx;
									}
									.num {
										margin-top: 14rpx;
										font-size: 24rpx;
										color: #00ffb2;
									}
								}
								.sit-end {
									font-size: 16rpx;
									color: #ffffff;
								}
							}
						}
					}
				}
			}
		}
	}

	.traffic-wrap {
		width: 100%;
		padding: 0 30rpx 50rpx 30rpx;
		background: #104993;
		border-radius: 24rpx;

		.traffic-content {
			.car-total-info {
				width: 100%;
				height: 400rpx;
				.category {
					width: 100%;
					height: 40rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.category-item {
						position: relative;
						font-size: 28rpx;
						color: #c3a365;
						&:nth-child(1) {
							margin-right: 52rpx;
						}
						&.active {
							font-size: 28rpx;
							color: #ffaa00;
							&::after {
								content: '';
								display: inline-block;
								width: 58rpx;
								height: 4rpx;
								background: #ffaa00;
								position: absolute;
								left: 50%;
								bottom: -10%;
								transform: translateX(-50%);
							}
						}
					}
				}
				.desc-wrap {
					width: 100%;
					height: calc(100% - 40rpx);
					display: flex;
					.desc-item {
						flex: 1;
						display: flex;
						justify-content: center;
						align-items: center;
						.img-wrap {
							width: 150rpx;
							height: 150rpx;
						}
						.title-box {
							margin-left: 40rpx;
							.title {
								font-weight: 500;
								font-size: 20rpx;
								color: #ffffff;
							}
							.num {
								margin-top: 12rpx;
								font-weight: bold;
								font-size: 32rpx;
								color: #ffd500;
							}
						}
					}
				}
			}
			.car-source-info {
				width: 100%;
				height: 400rpx;
			}
			.car-stop-time {
				width: 100%;
				height: 400rpx;
				.age-item {
					display: flex;
					align-items: center;
					width: 100%;

					.tip {
						width: 100rpx;
						font-size: 20rpx;
						color: #fff;
					}
					.progress-box {
						margin-left: 10rpx;
						flex: 1;
						height: 15rpx;
						background: rgba(255, 255, 255, 0.16);

						.progress {
							position: relative;
							height: 100%;

							.text {
								position: absolute;
								top: 50%;
								right: -100rpx;
								transform: translateY(-50%);
								color: #fff;
								font-size: 20rpx;
							}

							&.primary {
								background: linear-gradient(270deg, #003cff 0%, #00d7f8 100%);
							}

							&.success {
								background: linear-gradient(90deg, #00ff2b 0%, #119811 100%);
							}

							&.warn {
								background: linear-gradient(90deg, #f7ff00 0%, #f88e00 100%);
							}

							&.danger {
								background: linear-gradient(90deg, #ffaaad 0%, #e31a1a 100%);
							}
						}
					}
				}
			}
			.real-time-car-in {
				width: 100%;
				height: 400rpx;
			}
			.real-time-car-out {
				width: 100%;
				height: 400rpx;
			}
			.local-car-trend {
				width: 100%;
				height: 400rpx;
			}
		}
	}

	.stop-car-wrap {
		width: 100%;
		padding: 0 30rpx 50rpx 30rpx;
		background: #104993;
		border-radius: 24rpx;
		.stop-car-content {
			.stop-car-list {
				display: grid;
				gap: 20rpx;
				grid-template-columns: repeat(2, 1fr);
				.stop-car-item {
					padding: 20rpx 18rpx;
					height: 186rpx;
					background: rgba(34, 118, 231, 0.09);
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					border: 2rpx solid #09afff;

					&:nth-child(5) {
						grid-column: span 2;
					}

					.title-box {
						display: flex;
						justify-content: space-between;
						align-items: center;

						text {
							font-size: 20rpx;
							color: #38d0ff;
						}

						.tag-box {
							width: 80rpx;
							height: 30rpx;
							text-align: center;
							line-height: 25rpx;
							font-size: 16rpx;
							color: #00ff19;
							border-radius: 16rpx 16rpx 16rpx 16rpx;

							&.success {
								font-size: 16rpx;
								color: #00ff19;
								background: rgba(7, 248, 97, 0.14);
								border: 2rpx solid #00ff3c;
							}

							&.danger {
								font-size: 16rpx;
								color: #ff0000;
								background: rgba(248, 7, 7, 0.14);
								border: 2rpx solid #ff0000;
							}
						}
					}

					.line {
						margin-top: 15rpx;
						text {
							&:nth-child(1) {
								font-size: 16rpx;
								color: #ffffff;
							}
							&:nth-child(2) {
								margin-left: 32rpx;
								font-size: 22rpx;
								color: #00ff19;
							}
						}
					}
				}
			}

			.car-top5 {
				width: 100%;
			}
			.car-num-wrap {
				width: 100%;
				height: 400rpx;
			}
			.stop-money-wrap {
				width: 100%;
				.total-price-wrap {
					width: 100%;
					height: 100rpx;
					display: flex;
					align-items: center;
					padding-left: 30rpx;
					image {
						width: 51rpx;
						height: 51rpx;
					}
					.text {
						margin-left: 12rpx;
						font-size: 18rpx;
						color: #ffffff;
					}
					.num {
						margin-left: 20rpx;
						font-weight: bold;
						font-size: 28rpx;
						color: #00ff13;
					}
				}
				.chart-wrap {
					width: 100%;
					height: 350rpx;
				}
			}
			.money-way-wrap {
				width: 100%;
				height: 450rpx;
			}
		}
	}
}
</style>
